import { DeleteOutlined } from '@ant-design/icons';
import { DndContext, rectIntersection } from '@dnd-kit/core';
import { SortableContext, rectSortingStrategy } from "@dnd-kit/sortable";
import { Button, Col, Form, Layout, Row, Space } from "antd";
import { useState } from 'react';
import useFormConfig from "../useFormConfig";
import FormItem from './FormItem';
import GragItem from "./GragItem";
import "./index.less";

const { Header, Sider, Content } = Layout;

interface IFormPageProps {
    formConfig: ReturnType<typeof useFormConfig>
    // form: FormInstance; // Form 实例
}
const FormPage = (props: IFormPageProps) => {
    const { formConfig } = props;
    const { formItemsConfig, editingItem, setEditingItemKey, moveItem, removeFormItem } = formConfig
    const [form] = Form.useForm()
    const [dragDisabled, setDragDisabled] = useState(true)

    console.log(24, formItemsConfig)

    return <DndContext
        // collisionDetection={closestCenter}
        collisionDetection={rectIntersection}
        // onDragStart={({ active }) => {
        //     setActiveItem(getRowByField(formItemsConfig, active.id, "name"))
        // }}
        onDragEnd={(e) => {
            // setActiveItem(null)
            moveItem(e)
        }}
    >
        <SortableContext
            items={formItemsConfig.map((item) => ({ id: item.name }))}
            strategy={rectSortingStrategy} // 关键：使用栅格布局策略
        >
            <Content className="page-content form-page">
                <div className="content-header">
                    <div className="content-title">页面预览</div>
                    <Space>
                        <Button className='primary-outline-btn' onClick={() => setDragDisabled(!dragDisabled)}>{dragDisabled ? "调整布局" : "退出布局调整"}</Button>
                    </Space>
                </div>
                <div className="content-box">
                    <Form
                        labelCol={{ flex: "100px" }}
                        form={form}
                    >
                        <Row gutter={16}>
                            {
                                formItemsConfig.map((item, index) => {
                                    const { colSpan, name, label, required, type, placeholder } = item;
                                    const editing = editingItem?.name === name

                                    return (
                                        <Col span={colSpan} key={name} onClick={(e) => {
                                            e.stopPropagation()
                                            setEditingItemKey(item.name)
                                        }} className={`form-item-box ${editing ? "editing" : ""}`}>
                                            <GragItem id={name} dragDisabled={dragDisabled}>
                                                <FormItem formItemConfig={item}></FormItem>
                                            </GragItem>
                                            <div className="operate-box">
                                                <DeleteOutlined className="pointer danger" onClick={(e) => {
                                                    e.stopPropagation()
                                                    removeFormItem(item)
                                                }} />
                                            </div>
                                        </Col>
                                    );
                                })
                            }
                            {/* <DragOverlay>
                                {activeItem && (
                                    <Col
                                        // span={activeItem.colSpan}
                                        style={{ background: 'pink', padding: '16px' }}></Col>
                                )}
                            </DragOverlay> */}
                        </Row>
                    </Form>
                </div>
            </Content>
        </SortableContext>
    </DndContext>
};

export default FormPage;
